<template>
  <div>
    <div :id="divId" :style="{width: '100%', height: '40vh','margin-top':'2vh'}"></div>
  </div>
</template>

<script>
import {forecast} from '@/api/waterSupplyForecast';
export default {
  props: ['divId','area', 'lable'],
  mounted() {
    this.getData();
    console.log(this.divId)
  },
  data() {
    return {

    };
  },
  methods: {
    async getData() {
      let result = await forecast(this.area);
      console.log(result)
      this.drawLine(this.divId, this.lable, "m³", result.data);
    },
    drawLine(dom, text, formatter, data) {
      let xData = [];
      let realData = [];
      let predictData = [];
      for (let obj of data) {
        xData.push(obj.date);
        if (obj.real !== null) {
          realData.push(obj.real.toFixed(2));
        } else {
          realData.push(null);
        }
        predictData.push(obj.predict.toFixed(2));
      }
      let myChart = this.$echarts.init(document.getElementById(dom));
      let option = {
        title: {
          text: text,
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: {
          top: "8%",
          data: ["实际值", "预测值"],
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
          splitLine:{
            show:true
          }
        },
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "{value} " + formatter,
            },
          },
        ],
        grid: [
          {
            left: 70,
            right: 50,
          },
        ],
        dataZoom: [
          {
            show: true,
            realtime: true,
          },
        ],
        series: [
          {
            name: "预测值",
            type: "line",
            symbol: "none",
            data: predictData,
          },
          {
            name: "实际值",
            type: "line",
            symbol: "none",
            data: realData,
          },
        ],
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style>
</style>
